<template>
<div class="main">
  <el-card class="box-card" v-if="user" style="max-height: 330px">
    <div slot="header" class="clearfix">
      <span>公告</span>
    </div>
    <div v-for="item in announcements" :key="item.id" class="text item">
      <el-row :gutter="20" style="height: 20px">
        <el-col :span="user.type !== 3 ? 16 : 20"><div class="grid-content bg-purple">{{ item.content }}</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">{{ item.time }}</div></el-col>
        <el-col :span="4" v-if="user.type !== 3"><div class="grid-content bg-purple"><el-button type="danger" size="small" @click="del(item.id)">删除</el-button></div></el-col>
      </el-row>
    </div>
  </el-card>
</div>
</template>

<script>

import "echarts/lib/chart/bar"; // 柱图
export default {
  name: "Home",
  data() {
    return {
      user: null,
      announcements: [],
      bar: {
        textStyle: {
          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
        },
        dataset: {
          dimensions: ["Product", "2015", "2016", "2017"],
          source: [
            {
              Product: "Matcha Latte",
              2015: this.random(),
              2016: this.random(),
              2017: this.random()
            },
            {
              Product: "Milk Tea",
              2015: this.random(),
              2016: this.random(),
              2017: this.random()
            },
            {
              Product: "Cheese Cocoa",
              2015: this.random(),
              2016: this.random(),
              2017: this.random()
            },
            {
              Product: "Walnut Brownie",
              2015: this.random(),
              2016: this.random(),
              2017: this.random()
            }
          ]
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
      }
    }
  },
  mounted() {
    this.$http.get('get-info').then(res => {
      if(res.code === 200) {
        this.user = res.data
      }
    })
    this.getData()
  },
  methods: {
    getData() {
      this.$http.get('announcement/list').then(res => {
        if(res.code === 200) {
          this.announcements = res.data
        }
      })
    },
    random() {
      return Math.round(300 + Math.random() * 700) / 10;
    },
    del(id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`announcement/${id}`).then(res => {
          if (res.code === 200) {
            this.getData()
            this.$Message.success(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
